<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="UTF-8">
  <!-- 导入css -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <title>猫咪用品</title>
  <style>
    body{
      background-color: rgba(255,170,0,0.27);
      margin: 0;
      padding: 0;
    }
    .el-header,.el-footer{
      margin: 0;
      padding: 0;
    }

    .el-header > div >div> a {
      text-decoration: none;
      color: #815343;
    }
    .el-menu.el-menu--horizontal{
      border: none;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="150px">
      <div style="background-color: white">
        <div style="width: 1200px;margin: 0 auto;">
          <img src="imgs/logo.jpg" alt="" height="75px" width="150px" style="vertical-align: middle">
          <a href="">首页</a>
          <el-divider direction="vertical"></el-divider>
          <a href="">养猫守则</a>
          <el-divider direction="vertical"></el-divider>
          <a href="">个人中心</a>
          <el-divider direction="vertical"></el-divider>
          <a href="">购物车</a>
          <el-divider direction="vertical"></el-divider>
          <a href="">帮助</a>
        </div>
      </div>
      <div style="background-color: #815343">
        <el-menu style="width: 1200px;margin: 0 auto;" mode="horizontal" background-color="#815343"
                 text-color="#fff" active-text-color="pink "
        default-active="4" @select="mainSelect">
          <el-menu-item index="1">推荐产品</el-menu-item>
          <el-menu-item index="2">粮食专区</el-menu-item>
          <el-menu-item index="3">医疗保健</el-menu-item>
          <el-menu-item index="4">生活品质</el-menu-item>
          <el-menu-item index="5">清洁卫生</el-menu-item>
          <div style="float: right;position: relative;top: 10px">
            <el-input type="text" placeholder="请输入搜索内容" v-model="search">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-menu>
      </div>
    </el-header>

    <!--主体-->
    <el-main >
      <el-row gutter="20" style="width: 1200px;margin: 0 auto" v-if="currentIndex=='1'">
        <el-col span="6" v-for="p in CatLiveArr" style="margin-top: 20px">
          <el-card>
            <img :src="p.url" width="100%" height="233px">
            <p style="font-size: 14px; height: 30px;">{{p.title}}</p>
            <p><b>￥{{p.price}}</b>
              <span style="float: right;">销量:{{p.saleCount}}</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>


    <!--底部-->
    <el-footer>
      <div style="background-color: #282c30; color:#666;text-align: center;padding: 50px 0;width: 100%;" >
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>

<!-- 在element组件前导入vue -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 导入js -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        /*确认显示商品*/
        currentIndex:"1",
        /*与搜索框绑定*/
        search:"",
        CatLiveArr:[{url:"imgs/cl1.png",title:"FURRYTAIL 白白猫窝",price: 139,saleCount:507},
          {url:"imgs/cl2.png",title:"爱丽思IRIS 豪华双层三层别墅猫窝猫笼",price: 87,saleCount:588},
          {url:"imgs/cl3.png",title:"捣蛋鬼 三层带托盘猫咪笼",price: 46,saleCount:873},
          {url:"imgs/cl4.png",title:"日本多格漫Doggyman 猫用理毛弯角梳S形弧度 梳齿有弹性",price: 369,saleCount:142},
          {url:"imgs/cl5.png",title:"多格漫Doggyman 猫用不锈钢指甲剪 握感舒适",price: 46,saleCount:873}
        ]
      }
    },
    methods: {
      /*显示专区*/
      mainSelect(key){
        switch (key){
          case "1":
            location.href = "CatProductsDisplay.html";
            break;
          case "2":
            location.href = "CatFood.html";
            break;
          case "3":
            location.href = "CatHealth.html";
            break;
          case "4":
            location.href = "CatLive.html";
            break;
          case "5":
            location.href = "CatHygiene.html";
            break;
        }
      }
    }
  })
</script>
</html>